<template>
  <div class="flex h-screen bg-gray-100">
    <aside class="w-64 bg-purple-800 text-purple-100">
      <div class="px-8 py-4">
        <h2 class="text-3xl font-semibold">Your Logo</h2>
      </div>
      <nav>
        <a href="#" class="block px-8 py-3 bg-purple-700">Dashboard</a>
        <a href="#" class="block px-8 py-3 hover:bg-purple-700">Team</a>
        <a href="#" class="block px-8 py-3 hover:bg-purple-700">Projects</a>
        <a href="#" class="block px-8 py-3 hover:bg-purple-700">Calendar</a>
        <!-- More links -->
      </nav>
    </aside>
    <div class="flex-1">
      <header class="flex justify-between items-center p-6 bg-white">
        <input type="search" placeholder="Search..." class="input search-input">
        <div class="flex items-center">
          <!-- Profile dropdown -->
          <span>Tom Cook</span>
          <!-- <img class="h-10 w-10 rounded-full ml-4" src="/path-to-your-image.jpg" alt="profile"> -->
        </div>
      </header>
      <main class="p-6">
        <!-- Content goes here -->
      </main>
    </div>
  </div>
</template>

<script>
export default {
  // Your Vue component logic here
};
</script>

<style>
/* You can add additional styles if needed */
</style>
